<template>
  <div>
    <!-- <iframe id="myFrame" src="https://www.bilibili.com" width="800" height="600" frameborder="0" :onload="ol"></iframe> -->
    <el-carousel ref="carousel" height="80vh" direction="vertical" :autoplay="false" trigger='click' class="zdy">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="content">{{ item }}</div>
      </el-carousel-item>
    </el-carousel>
    <div>
      <button @click="() => nums--"> - </button>
      <button @click="() => nums++"> + </button>
      <div>{{ js }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onActivated, computed } from 'vue';
const carousel = ref(null);
const nums = ref(0);
const js = computed(() => {
  return nums.value + 1
})
onMounted(() => {

  let time = null
  // 添加鼠标滚轮事件监听器
  const handler = event => {
    // 判断鼠标滚动方向
    const delta = Math.sign(event.deltaY);

    if (time) {
      clearTimeout(time)
    }
    time = setTimeout(() => {
      // 根据滚动方向调用相应的方法切换轮播项
      if (delta < 0) {
        carousel.value.prev();
      } else if (delta > 0) {
        carousel.value.next();
      }
      // 清除定时器
      clearTimeout(time);
    }, 200)


    // 阻止默认滚动行为
    // event.preventDefault();
  };

  // 监听滚轮事件
  window.addEventListener('wheel', handler, { passive: false });

  // 在组件卸载时移除事件监听器
  onUnmounted(() => {
    window.removeEventListener('wheel', handler);
  });
})
onActivated(() => {
  // 重置轮播到第一页
  carousel.value.setActiveItem(0);
});
</script>
<style scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

::v-deep(.zdy .el-carousel__indicators li button) {
  background-color: #8f8b8b;
}

::v-deep(.zdy .el-carousel__indicators li .is-active button) {
  background-color: #000;
}

.content {
  width: 100%;
  height: 100%;
}
</style>